<template>
  <div class="quoteCard">

    <el-menu
        default-active="1"
        v-model="menuSelect"
        background-color="#ffffff"
        text-color="#242424"
        active-text-color="#1998e4"
        mode="horizontal"
        @change="console.log(menuSelect)"
    >
      <el-menu-item index="1" @click="clickRef">参考文献</el-menu-item>
      <el-menu-item index="2" @click="clickQuote">被引</el-menu-item>
<!--      <el-menu-item index="3" @click="clickRec">相同作者文章推荐</el-menu-item>-->

    </el-menu>
  </div>

  <div v-show="menuSelect === 1">
    <detail-bottom-tabs-item :item-list="paperRefs"></detail-bottom-tabs-item>
<!--    <detail-bottom-tabs-refs></detail-bottom-tabs-refs>-->
  </div>

  <div v-show="menuSelect === 2">
    <detail-bottom-tabs-item :item-list="citations"></detail-bottom-tabs-item>
    <!--    <detail-bottom-tabs-quote></detail-bottom-tabs-quote>-->
  </div>

<!--  <div v-show="menuSelect === 3">-->
<!--    <detail-bottom-tabs-item :item-list="authorRecommend"></detail-bottom-tabs-item>-->
<!--  </div>-->


</template>

<script>

import axios from "@/utils/MyAxios";
import qs from "qs";
import DetailBottomTabsItem from "@/detail/components/DetailBottomTabsItem";
export default {
  name: "DetailBottomTabs",
  components: {DetailBottomTabsItem,},
  data() {
    return {
      menuSelect: 1,
      authorRecommend: [],
      citations: [],
      paperRefs: [],
    }
  },
  mounted() {
    // this.getRecommendInfo()
    this.getRef()
  },
  methods:{

    // getRecommendInfo() {
    //   let data = {
    //     paperId: this.$route.query.paperId,
    //   }
    //   axios.post('/api/paper/recommend', qs.stringify(data)).then(res => {
    //     console.log(res);
    //     if (res.data.code === 0) {
    //       this.authorRecommend = res.data.data
    //     }
    //     else {
    //       console.log('获取同作者推荐错误')}
    //   })
    // },

    getCitation() {
      if (this.citations.length > 0) return

      let data = {
        paperId: this.$route.query.paperId
      }
      axios.post('/api/paper/citation', qs.stringify(data)).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.citations = res.data.data
        }
        else {
          '获取被引失败'
        }
      })
    },

    getRef() {
      if (this.paperRefs.length > 0) return

      let data = {
        paperId: this.$route.query.paperId
      }
      axios.post('/api/paper/ref', qs.stringify(data)).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          console.log('获取ref成功');
          this.paperRefs = res.data.data
        }
        else {
          console.log('获取ref失败');
        }
      })
    },


    clickRef() {
      this.menuSelect = 1
      this.getRef()
    },

    clickQuote() {
      this.menuSelect = 2
      this.getCitation()
    },

    // clickRec() {
    //   this.menuSelect = 3
    // }
  }
}
</script>

<style scoped>
  .quoteCard {
    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
  }


</style>